@extends('layout.default')

@section('stylesheet')
  <link href="//cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css" rel="stylesheet">
@stop

@section('layout.content')
 
  <div class="row">
    <div class="col-xs-12 align-right">
      <div style="margin-bottom: 15px;">
        <a href="{{route('system.permission.create')}}" class="btn btn-lg btn-danger"><i class="ace-icon fa fa-plus"></i>新增权限</a>
      </div>
    </div> 
  </div><!-- /.row -->

  <div class="row">
    <div class="col-xs-12">
      <table class="table table-hover table-striped table-bordered nonborder" id="table"></table>

    </div><!-- /.col -->
  </div><!-- /.row -->
@stop

@section('javascript')
  <script src="//cdn.bootcss.com/bootstrap-table/1.13.1/bootstrap-table.min.js"></script>
  <script src="//cdn.bootcss.com/bootstrap-table/1.13.1/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
  <script src="//cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>

  <script type="text/javascript">


      //console.log(data1);
      $(function () {
          var $table = $('#table');
          var uri = '{{route("system.permission.list")}}';

          $table.bootstrapTable({
              url: uri,
              idField: 'id',
              treeId: "id",
              columns: [
                  {field: 'order', title: '序号',class:'align-center treegrid-order'},
                  {field: 'title', title: '名称', class: 'align-middle',class: 'treegrid-title'},
                  {field: 'name', title: '权限', class: 'align-middle treegrid-name'},
                  {field: 'controller', title: '控制器'},
                  {field: 'action', title: '模块',class: 'align-middle treegrid-action'},
                  {field: 'using', title: '有效', class: 'align-center treegrid-icon', formatter: 'usingFormatter'},
                  {field: 'status', title: '显示', class: 'align-center treegrid-status', formatter: 'statusFormatter'},
                  {field: 'operate', title: '操作', class: 'align-middle treegrid-op', events: operateEvents, formatter: 'operateFormatter'},
              ],

              // bootstrap-table-treegrid.js 插件配置 -- start

              //在哪一列展开树形
              treeShowField: 'title',
              //指定父id列
              parentIdField: 'parent',

              onLoadSuccess: function (data) {
                  console.log(data);
                  $table.treegrid({
                      initialState: 'collapsed',
                      treeColumn: 1,
                      expanderExpandedClass: 'glyphicon glyphicon-triangle-bottom',
                      expanderCollapsedClass: 'glyphicon glyphicon-triangle-right',
                      onChange: function () {
                          $table.bootstrapTable('resetWidth');
                      }
                  });
              }

              // bootstrap-table-treetreegrid.js 插件配置 -- end
          });


      });

      function operateFormatter(value, row, index) {
          var pid = row.id;
           return [
                  '<a class="btn btn-xs btn-light" href="/system/permission/edit/' + row.id + '">改</a> '
              ].join('');
      }


      function statusFormatter(value, row, index) {
          if (value === 1) {
              return '<span class="orange3" ><i class="ace-icon fa fa-eye"></i></span>'
          }
          return '<span class="grey"><i class="ace-icon fa fa-eye-slash"></i></span>'
      }

      function usingFormatter(value, row, index) {
          if (value === 1) {
              return '<span class="green" ><i class="ace-icon fa fa-circle"></i></span>'
          }
          return '<span class="grey"><i class="ace-icon fa fa-circle"></i></span>'
      }

      window.operateEvents = {
          'click .btn-add': function (e, value, row, index) {
              add(row.id);
          },

          'click .btn-delete': function (e, value, row, index) {
              del(row.id);
          }
      };

      function add(id) {
          alert("add 方法 , id = " + id);
      }

      function del(id) {
          alert("del 方法 , id = " + id);
      }

      function update(id) {
          alert("update 方法 , id = " + id);
      }


  </script>
@stop